<template>
	<div>
		<div>
			<el-container>
				<el-aside width="240px">
					<el-menu default-active="Home" class="el-menu-vertical-demo" background-color="#294256"
						text-color="#bbcbd9" unique-opened active-text-color="#00a0ff" router>
						<el-menu-item index="Home">
							<i class="el-icon-menu"></i>
							<span slot="title">网站主页 </span>
						</el-menu-item>
						<el-submenu index="1">
							<template slot="title">
								<i class="el-icon-setting"></i>
								<span>系统管理</span>
							</template>
							<el-menu-item index="SysUser"><i class="el-icon-user"></i>用户管理</el-menu-item>
							<el-menu-item index="stage"><i class="el-icon-s-custom"></i>角色管理</el-menu-item>
							<el-menu-item index="goods"><i class="el-icon-receiving"></i>菜单管理</el-menu-item>
							<el-menu-item index="SysCompany"><i class="el-icon-office-building"></i>公司管理</el-menu-item>
						</el-submenu>
						<el-submenu index="2">
							<template slot="title">
								<i class="el-icon-location"></i>
								<span>课程管理</span>
							</template>
							<el-menu-item index="Sort"><i class="el-icon-receiving"></i>课程分类管理</el-menu-item>
							<el-menu-item index="course"><i class="el-icon-s-order"></i>课程管理</el-menu-item>
							<el-menu-item index="courseVideos"><i class="el-icon-s-order"></i>课程视频管理</el-menu-item>
							<el-menu-item index="courseEvaluate"><i class="el-icon-s-order"></i>课程评价管理</el-menu-item>
							<el-menu-item index="courseOrder"><i class="el-icon-s-order"></i>课程订单管理</el-menu-item>
						</el-submenu>
						<el-submenu index="3">
							<template slot="title">
								<i class="el-icon-location"></i>
								<span>咨询师管理</span>
							</template>
							<el-menu-item index="Grade"><i class="el-icon-phone-outline"></i>咨询师等级管理</el-menu-item>
							<el-menu-item index="Counselor"><i class="el-icon-s-order"></i>咨询师管理</el-menu-item>
							<el-menu-item index="Field"><i class="el-icon-s-order"></i>擅长领域管理 </el-menu-item>
							<el-menu-item index="consultantFeeSort"><i class="el-icon-s-order"></i>咨询师收费分类管理</el-menu-item>
							<el-menu-item index="consultantFees"><i class="el-icon-s-order"></i>咨询师收费标准管理</el-menu-item>
							<el-menu-item index="SysMessage"><i class="el-icon-s-order"></i>咨询师留言管理 </el-menu-item>
							<el-menu-item index="SysEvaluate"><i class="el-icon-s-order"></i>咨询师评价管理 </el-menu-item>
							<el-menu-item index="counselorOrder"><i class="el-icon-s-order"></i>咨询订单管理 </el-menu-item>
						</el-submenu>
						<el-submenu index="4">
							<template slot="title">
								<i class="el-icon-location"></i>
								<span>内容管理</span>
							</template>
							<el-menu-item index="articleSort"><i class="el-icon-phone-outline"></i>文章分类管理</el-menu-item>
							<el-menu-item index="article"><i class="el-icon-s-order"></i>文章管理</el-menu-item>
							<el-menu-item index="fmSort"><i class="el-icon-s-order"></i>FM分类管理 </el-menu-item>
							<el-menu-item index="fm"><i class="el-icon-s-order"></i>FM管理 </el-menu-item>
							<el-menu-item index="Welfare"><i class="el-icon-s-order"></i>公益中心管理 </el-menu-item>
							<el-menu-item index="Knowledge"><i class="el-icon-s-order"></i>心理知识管理 </el-menu-item>
						</el-submenu>
						<el-submenu index="5">
							<template slot="title">
								<i class="el-icon-location"></i>
								<span>心理测评管理</span>
							</template>
							<el-menu-item index="psyAssessSort"><i
									class="el-icon-phone-outline"></i>心理测评分类管理</el-menu-item>
							<el-menu-item index="psyAssess"><i class="el-icon-s-order"></i>心理测评管理</el-menu-item>
						</el-submenu>
						<el-submenu index="6">
							<template slot="title">
								<i class="el-icon-location"></i>
								<span>心理答疑管理</span>
							</template>
							<el-menu-item index="query"><i class="el-icon-phone-outline"></i>问题管理</el-menu-item>
							<el-menu-item index="reply"><i class="el-icon-s-order"></i>回复管理</el-menu-item>
						</el-submenu>
						<el-menu-item index="SysBooking">
							<i class="el-icon-setting"></i>
							<span slot="title">咨询预约管理</span>
						</el-menu-item>

						<el-menu-item index="notice">
							<i class="el-icon-setting"></i>
							<span slot="title">资讯公告管理</span>
						</el-menu-item>

						<el-menu-item index="SysIntegral">
							<i class="el-icon-setting"></i>
							<span slot="title">积分管理</span>
						</el-menu-item>
					</el-menu>
				</el-aside>
				<el-container>
					<el-header>
						<div class="header-left">
							<i class="el-icon-s-fold"></i>
						</div>
						<el-dropdown class="header-right" @command="handleCommand">
							<span class="el-dropdown-link">
								<img src="../assets/images/logimg.jpg" alt="" />
								<i class="el-icon-arrow-down el-icon--right"></i>
							</span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item command="a">个人中心</el-dropdown-item>
								<el-dropdown-item command="b">修改资料</el-dropdown-item>
								<el-dropdown-item command="c">退出登录</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</el-header>
					<el-main>
						<router-view></router-view>
					</el-main>
				</el-container>
			</el-container>
		</div>
	</div>
</template>

<script scoped>
	export default {
		data() {
			return {

			}
		},
		methods: {
			logout() {
				this.$ajax.get('/logout').then(resp => {
					if (resp.code == 200) {
						this.$message("退出成功");
						sessionStorage.removeItem('loginInfe');
						this.$router.replace('/login');
					} else {
						this.$message("退出失败");
					}
				}).catch(resp => {
					this.$message.error("退出失败");
				})
			},
			handleCommand(command) {
				if (command === 'c') {
					this.logout();
				}
			}
		},
	}
</script>

<style scoped>
	.el-aside {
		background-color: #294256;
	}

	.el-menu {
		text-align: left;
		height: 100vh;
	}

	.el-submenu .el-menu-item {
		color: red;
	}

	.el-dropdown-link {
		cursor: pointer;
		color: #409EFF;
	}

	.header-left {
		float: left;
		cursor: pointer;
		line-height: 60px;
		font-size: 20px;
	}

	.header-right {
		float: right;
		text-align: center;
		line-height: 60px;
		vertical-align: middle;
	}

	.header-right img {
		width: 40px;
		height: 40px;
		line-height: 60px;
		vertical-align: middle;
		border-radius: 10px;
	}

	.el-header {
		height: 80px;
		box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
	}
</style>